import React, { useState ,useMemo} from 'react'
//防止因为组件重新渲染，导致方法被重新创建 ，起到缓存作用; 只有第二个参数 变化了，才重新声明一次
export default function App() {
    const [text, setText] = useState("")
    const [list, setList] = useState(["学习", "睡觉", "bjyx"])
    const handleCanage =useCallback(
        (e) => {
        setText(e.target.value)
    },[text]) 
    const handleAdd = useCallback(
        () => {
            // console.log(text);
            setList([...list, text])
            setText("")
            // 清空输入框
        },[text,list]
    )
    // useCallback 不会执行第一个参数函数，而是将它返回给你,而useMemo会执行第一个函数并且将函数执行结果返回给你
    const handleDel=useMemo(
        ()=>(i)=>{
            let newList=[...list]
            newList.splice(i,1)
            setList(newList)
        },[list]
    )
    return (
        <div>
            <input type="text" onChange={handleCanage} value={text}/>
            <button onClick={handleAdd}>add</button>
            <ul>
                {
                    list.map((item,index) =>
                        <li key={index}>{item}
                            <button onClick={()=>handleDel(index)}>del</button>
                        </li>
                    )
                }
           {!list.length &&  <div>暂无任务</div>}
            </ul>
        </div>
    )
}
